<template>
    <div class="card-box" :style="{ height: props.height }">
        <slot />
    </div>
</template>

<script setup>
const props = defineProps({
    // 盒子高度
    height: {
        type: [Number, String],
        default: '100%'
    },
})
</script>

<style lang='scss' scoped>
.card-box {
    width: 100%;
    height: 100%;
    flex: 1;
    margin-top: 16px;
    box-shadow: 0 0 5px 5px #eee;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: auto;
    overflow-x: hidden;
}

.card-box::-webkit-scrollbar {
    width: 6px; //修改滚动条宽度
}

.card-box::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #eee;
}

// 上下箭头按钮高度
.card-box::-webkit-scrollbar-button {
    height: 0;
}

//鼠标移入样式
.card-box::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.card-box::-webkit-scrollbar-track {
    border-radius: 6px;
    background: #f7f7f7;
}

.card-box::-webkit-scrollbar-button {
    background: #eee;
}

.card-box::-webkit-scrollbar-corner {
    background-color: transparent;
}

//水平方向滚动条
.card-box::-webkit-scrollbar:horizontal {
    width: 0;
}

//垂直方向滚动条
.card-box::-webkit-scrollbar:vertical {
    width: 6px;
}
</style>